<template>
  <transition name="slide">
    <div class="singer-details">
    </div>
  </transition>
</template>

<script>
import { mapGetters } from 'vuex'
import { singerDetails } from 'api/singers'
import { ERR_OK } from 'api/config'
import { songFactory } from 'util/song'
export default {
  data() {
    return {
      songList: []
    }
  },
  computed: {
    ...mapGetters(['singer'])
  },
  created() {
    this._getSingerDetail()
    console.log(this.singer)
  },
  methods: {
    _getSingerDetail() {
      if (!this.singer.id) {
        // 直接在歌曲列表刷新的
        this.$router.push('/singer')
      }
      singerDetails(this.singer.id).then(res => {
        if (res.code === ERR_OK) {
          this.songList = this._normalSongs(res.data.list)
          console.log(this.songList)
        }
      })
    },

    _normalSongs(itemList) {
      console.log(itemList)
      let tmp = []
      itemList.forEach(item => {
        let musicData = item.musicData
        if (musicData.songid && musicData.albummid) {
          tmp.push(songFactory(musicData))
        }
      })
      return tmp
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '../../assets/stylus/variable';

.singer-details {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: $color-background;
}

.slide-enter-active, .slide-leave-active {
  transition: all 0.3s;
}

.slide-enter, .slide-leave-to {
  transform: translate3d(100%, 0, 0);
}
</style>